<template>
  <div class="Background">
    <div class="analysis-container">
      <!-- 顶部区域 -->
      <div class="top-section">
        <div class="left-info">
          <h1 class="event-title">{{ event.title }}</h1>
          <div class="enentImage">
            <img class="Pic" src="../picture/none.png" alt="pic" />
          </div>

          <div class="stats">
            <div class="stat-item">
              <label>文章总数：</label>
              <span class="value">{{ event.articles }}</span>
            </div>
            <div class="stat-item">
              <label>评论总数：</label>
              <span class="value">{{ event.comments }}</span>
            </div>
            <div class="stat-item">
              <label>热度指数：</label>
              <span class="heat-level">
                <span v-for="n in 5" :key="n" :class="{ 'star-filled': n <= Math.round(eventTotalHeat) }">★</span>
              </span>
            </div>
          </div>
        </div>
        <div class="right-chart">
          <h3>热度分析</h3>
          <div class="line_C">
            <LineChart :data="trendData" />
          </div>
        </div>
      </div>

      <!-- 中部区域 -->
      <div class="middle-section">
        <div class="left-column">
          <div class="keywords-box">
            <h3>关键词</h3>
            <div class="keywords">
              <span v-for="(word, index) in event.keywords" :key="index" class="keyword-tag">
                {{ word }}
              </span>
            </div>
          </div>

          <div class="hot-words">
            <h3>话题统计 (TOP10)</h3>
            <ul class="word-list">
              <li v-for="(word, index) in event.hotwords" :key="index">
                {{ index + 1 }}.&nbsp;{{ word }}
              </li>
            </ul>
          </div>
        </div>

        <div class="right-column">
          <h3>性别分布</h3>
          <div class="gender-chart">
            <PieChart :data="genderData" />
          </div>
        </div>
      </div>

      <!-- 底部区域 -->
      <div class="bottom-section">
        <div class="sentiment-analysis">
          <h3>事件情感分布</h3>
          <div class="sentiment-chart">
            <BarChart :data="sentimentData" />
          </div>
          <div class="sentiment-stats">
            <div class="sentiment-item">
              <span class="label positive">积极</span>
              <span class="value">{{ sentimentDistribution.positive.toFixed(0) }}%</span>
            </div>
            <div class="sentiment-item">
              <span class="label neutral">中性</span>
              <span class="value">{{ sentimentDistribution.neutral.toFixed(0) }}%</span>
            </div>
            <div class="sentiment-item">
              <span class="label negative">消极</span>
              <span class="value">{{ sentimentDistribution.negative.toFixed(0) }}%</span>
            </div>
          </div>
        </div>
        <button class="detail-btn" @click="showCommentModal = true">详细分析</button>
      </div>
      <!-- 评论弹窗 -->
      <CommentModal :visible="showCommentModal" :comments="commentsData" @close="showCommentModal = false" />

      <!-- 底部按钮 -->
      <div class="action-buttons">
        <button class="hot-articles" @click="showArticleModal = true">查看热门文章/帖</button>
        <button class="back-btn" @click="goBack">返回</button>
      </div>

      <ArticleModal :visible="showArticleModal" :articles="articlesData" @close="showArticleModal = false" />
    </div>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { useRouter } from 'vue-router';
import axios from 'axios';
import LineChart from '@/components/sentiment-components/LineChart.vue';
import PieChart from '@/components/sentiment-components/PieChart-A.vue';
import BarChart from '@/components/sentiment-components/BarChart-A.vue';
import CommentModal from '@/components/sentiment-components/CommentModal.vue';
import ArticleModal from '@/components/sentiment-components/ArticleModal.vue';
import { ref, computed, onMounted,watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import userSotre from '@/store/AnalysisStore.js';

import {getArticlesById, getCommentsById} from "../api/analysis"

const UserSotre = userSotre();
const { P_event } = storeToRefs(UserSotre);

// 初始化默认值
const event = ref({
  title: '',
  articles: 0,
  comments: 0,
  genderData: [0, 0],
  sentimentData: [0, 0, 0],
  hotwords: [],
  keywords: [],
  eventstate: 0,
  id: ''
});

const router = useRouter();
let showCommentModal = ref(false);
let showArticleModal = ref(false);

const commentsData = ref([]);
const articlesData = ref([]);

// 在组件挂载后更新数据
onMounted(() => {
  if (P_event.value) {
    event.value = P_event.value; 
    do_getCommentsById(event.value.id);
    do_getArticlesById(event.value.id);
  }
});

async function do_getCommentsById(id) {
  if (!id) return;
  console.log("do_getCommentsById:", id)
  const res = await getCommentsById(id)
  commentsData.value = res.data;
}

async function do_getArticlesById(id) {
  if (!id) return;
  console.log("do_getArticlesById:", id)
  const res = await getArticlesById(id)
  console.log(res)
  articlesData.value = res.data;
}


const trendData = ref([
  //实际热度
  {
    xAxis: ['去年','1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月'],
    data:[0,0,0,0,0,0,0,0,0,0,0,0,0]
  },
  /* //预测热度
  {
    xAxis: ['1月', '2月', '3月', '4月', '5月'],
    data: [150, 180, 120, 100, 90]
  } */
]);

const eventTotalHeat = computed(() => { //计算事件总热度
  let heat = articlesData.value.length+commentsData.value.length
  heat = heat/200
  if(heat>5) heat = 5
  return heat
});

const eventHeat = computed(() => { //计算事件热度
  let heat = [0,0,0,0,0,0,0,0,0,0,0,0,0];
  for (let i = 0; i < articlesData.value.length; i++) {
    const time = articlesData.value[i].time;
    const year = time.substring(0, 4);
    const month = time.substring(5, 7);
    if(year != '2025'){//last year
      heat[0]++
    }else{
      heat[parseInt(month)]++
    }
  }
  for (let i = 0; i < commentsData.value.length; i++) {
    const time = commentsData.value[i].time;
    const year = time.substring(0, 4);
    const month = time.substring(5, 7);
    if(year != '2025'){//last year
      heat[0]++
    }else{
      heat[parseInt(month)]++
    }
  }
  return heat;
});

watchEffect(() => {
  trendData.value = [{
    xAxis: ['去年','1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月'],
    data: eventHeat.value
  }];
});

const genderData = computed(() => [
  { value: event.value.genderData?.[0] || 0, name: '女性' },
  { value: event.value.genderData?.[1] || 0, name: '男性' }
]);

const sentimentData = computed(() => ({
  categories: ['积极', '中性', '消极'],
  values: [
    event.value.sentimentData?.[0] || 0,
    event.value.sentimentData?.[1] || 0,
    event.value.sentimentData?.[2] || 0
  ]
}));

const sentimentDistribution = computed(() => ({
  positive: 100*event.value.sentimentData[0]/(event.value.sentimentData[0]+event.value.sentimentData[1]+event.value.sentimentData[2]),
  neutral: 100*event.value.sentimentData[1]/(event.value.sentimentData[0]+event.value.sentimentData[1]+event.value.sentimentData[2]),
  negative: 100*event.value.sentimentData[2]/(event.value.sentimentData[0]+event.value.sentimentData[1]+event.value.sentimentData[2])
}));


const hotwords = computed(() => (event.value.hotwords || []).slice(0, 10));

const goBack = () => {
  router.push('/dashboard');
};
</script>



<style scoped>
.gender-chart{
  height: 400px;
}
h3{
  color: #000000;
  font-size: 22px;
}
.enentImage {
  margin-bottom: 40px;
  background-color: #333;
  width: 100%;
  height: 50%;
}

.Background {
  width: 100%;
  background-image: url('../background/DBack.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.analysis-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.top-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  margin-bottom: 30px;
}

.left-info {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.event-title {
  margin: 0 0 20px 0;
  color: #333;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item label {
  color: #666;
}

.value {
  font-weight: bold;
  color: #1890ff;
}

.heat-level {
  color: #ff4d4f;
}

.right-chart {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 91%;
}

.right-column {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 88%;
}

.line_C {
  height: 350px;
  margin-top: 20px;
}

.left-column {
  align-items: horizontal;
  width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.middle-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.keywords-box {
  background: #fff;
  width: 65%;
  height: 88%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  background: #e0f7fa;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  margin: 4px;
  color: #057ef0;
  transition: transform 0.3s ease;
}

.keyword-tag:hover {
  transform: scale(1.05);
}

.hot-words {
  background: #ffffff;
  height: 88%;
  width: 100%;
  margin-left: -50px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  
}

.word-list {
  list-style: none;
  color: #000;
  padding: 0;
  margin: 10px 0;
  text-align: left; /* 显式设置文字左对齐 */
}

.word-list li {
  padding: 12px 0;
  padding-left: 20px;
  /* 添加左内边距以增加间隔 */
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
  /* 添加过渡效果 */
}

.word-list li:hover {
  background-color: #f0f9eb;
  /* 鼠标悬停时改变背景色 */
}

.bottom-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffffff;
  /* 设置背景颜色 */
  padding: 30px;
  /* 增加内边距 */
  border-radius: 12px;
  /* 圆角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* 阴影 */
  margin-top: -30px;
  /* 增加上边距 */
}

.sentiment-analysis {
  flex: 1;
  margin-right: 20px;
  /* 增加右边距 */
}

.sentiment-chart {
  height: 200px;
  margin: 20px 0;
}

.sentiment-stats {
  display: flex;
  margin-left: 45%;
  gap: 20px;
  /* 调整间距 */
}

.sentiment-item {
  text-align: center;
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
}

.sentiment-item:hover {
  transform: scale(1.05);
  /* 鼠标悬停时放大 */
}

.label {
  display: block;
  padding: 6px 16px;
  border-radius: 6px;
  /* 圆角 */
}

.positive {
  background: #48de72;
}

.neutral {
  background: #ebd563;
}

.negative {
  background: #e45a50;
}

.detail-btn {
  display: flex;
  margin: 125px 0 0 0;
  background: #1890ff;
  color: white;
  padding: 20px 25px;
  border: none;
  border-radius: 6px;
  /* 圆角 */
  cursor: pointer;
  transition: background 0.3s ease;
  /* 添加过渡效果 */
}

.detail-btn:hover {
  background: #137cbd;
  /* 鼠标悬停时改变背景色 */
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.hot-articles,
.back-btn {
  padding: 10px 30px;
  margin: 0 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.hot-articles {
  background: #ff4d4f;
  color: white;
}

.back-btn {
  background: #06b939;
  color: #f5f7f4;
}

.Pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heat-level span {
  color: #ccc; /* 默认灰色 */
}

.heat-level .star-filled {
  color: #ff4d4f; /* 热度颜色 */
}
</style>